<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../../vueCore/vue.min.2.7.14.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <title>主页</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .swiper-container {
      width: 100%;
      height: 100vh;
    }

    .swiper-container img {
      width: 100%;
      height: 100%;
    }

    .about-container {
      margin-top: 100px;
      width: 100%;
      padding: 0 30px;
    }

    .perf-root {
      margin-top: 100px;
      width: 100%;
      height: 600px;
      display: flex;
      justify-content: space-between;
    }

    .perf-item {
      width: 330px;
      height: 100%;
    }

    .item-top {
      width: 100%;
      height: 90%;
      transition: all .3s;
    }

    .item-top:hover {
      cursor: pointer;
      transform: scale(1.05);
    }

    .item-bot {
      width: 100%;
      height: 10%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: #999999;
    }

    .h-root {
      margin: 100px 0;
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: space-between;
    }

    .h-item {
      width: 330px;
      height: 100%;
    }

    .h-item-top {
      width: 100%;
      height: 90%;
      transition: all .3s;
    }

    .h-item-top:hover {
      cursor: pointer;
      transform: scale(1.05);
    }

    .h-item-bot {
      width: 100%;
      height: 10%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: #999999;
    }

    .footer {
      margin-top: 100px;
      width: 100%;
      height: 200px;
      padding: 0 30px;
      display: flex;
      align-items: center;
      background-color: #333;
    }

    .footer .el-divider__text {
      background-color: #333;
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="root">
    <div class="swiper-container">
      <el-carousel height="100vh">
        <el-carousel-item v-for="{id, src} in swiper" :key="id">
          <img :src="src" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="about-container">
      <el-divider content-position="center">专柜</el-divider>
      <div class="perf-root">
        <div class="perf-item" v-for="{id,src,text} in yswiper" :key="id" @click="toPage('/prefecture')">
          <img class="item-top" :src="src"></img>
          <div class="item-bot">{{text}}</div>
        </div>
      </div>
    </div>

    <div class="about-container">
      <el-divider content-position="center">婚嫁</el-divider>
      <div class="h-root">
        <div class="h-item" v-for="{id,src,text} in hswiper" :key="id" @click="toPage('/about')">
          <img class="h-item-top" :src="src"></img>
          <div class="h-item-bot">{{text}}</div>
        </div>
      </div>
    </div>

    <footer class="footer">
      <el-divider content-position="center">
        关注我们
      </el-divider>
    </footer>


  </div>

  <script>

    function createImgs(imgs) {
      return imgs.map((item, index) => {
        return {
          id: index + 1,
          src: `./images/${item}`
        }
      })
    }

    const imgs = ['s-1.jpeg', 's-2.jpg', 's-3.jpg']
    const yimgs = ['y-1.jpg', 'y-2.jpg', 'y-3.jpg']
    const yimgt = ['如果你还没下定决心，请不要送她守护一生', '愿一切美好如约而至！', '因爱而生，为爱无敌']
    const himgt = ['不渝盟誓 ，情约今生', '如果你还没下定决心，请不要送她「守护一生」', '佳期如约，幸福如花']
    const himgs = ['h-1.jpg', 'h-2.jpg', 'h-3.jpg']
    const swiper = createImgs(imgs)
    const yswiper = createImgs(yimgs).map((item, index) => {
      return {
        ...item,
        text: yimgt[index]
      }
    })
    const hswiper = createImgs(himgs).map((item, index) => {
      return {
        ...item,
        text: himgt[index]
      }
    })
    const vm = new Vue({
      el: "#root",
      data: {
        swiper: swiper,
        yswiper: yswiper,
        hswiper: hswiper,
      },
      methods: {
        toPage(url) {
          window.location.href = `.${url}.html`
        }
      },
    })
  </script>
</body>

</html>